<template>
    <div>
        <div class="page-title">预约管理</div>
        <el-button class="m-t-15" type="danger" size="small" icon="el-icon-delete" @click="deleteAll">批量删除
        </el-button>

        <el-table :data="tableData" class="m-t-5" @selection-change="selectChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="guidetitle" label="关联指南" width="300"></el-table-column>
            <el-table-column prop="content" label="内容" width="400"></el-table-column>
            <el-table-column prop="tel" label="联系方式" width="150"></el-table-column>
            <el-table-column prop="date" :formatter="dateFormat" label="预约时间" width="200"></el-table-column>
            <el-table-column prop="time" :formatter="dateFormat" label="申请时间" width="200"></el-table-column>
            <el-table-column label="操作" min-width="200">
                <template #default="v">
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(v.$index, v.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" :current-page="current"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
    import {
        get,
        del
    } from '@/network/request'
    import moment from 'moment'

    export default {
        name: 'Book',
        data() {
            return {
                tableData: [],
                total: 0,
                current: 1,
                select: '' // 选中item
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/book', {
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            })
        },
        methods: {
            // 时间格式化
            dateFormat(row, column, time) {
                return moment.unix(time).format("YYYY-MM-DD HH:mm:ss")
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    del('/deleteBook', {
                        'id': row.id
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.tableData.splice(index, 1)
                            this.$message.success({
                                message: '删除成功！',
                                offset: 70
                            })
                        } else {
                            this.$message.error({
                                message: '删除失败！',
                                offset: 70
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message.info({
                        message: '已取消删除！',
                        offset: 70
                    })
                })
            },
            // 分页
            changePage(page) {
                get('/book', {
                    page,
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            },
            // 切换表格选中
            selectChange(arr) {
                let str = ''
                for (let i = 0; i < arr.length; i++) {
                    str += arr[i].id + ','
                }
                this.select = str.substring(0, str.length - 1)
            },
            // 批量删除
            deleteAll() {
                this.$confirm('此操作将永久删除，是否继续？', '系统提示', {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    del('/deleteAllBook', {
                        'id': this.select
                    }).then(res => {
                        const result = res.data
                        if (result.code == 200) {
                            this.$router.go(0)
                        } else {
                            this.$message.error({
                                message: '删除失败！',
                                offset: 70
                            })
                        }
                    }).catch()
                }).catch(() => {
                    this.$message.info({
                        message: '已取消删除！',
                        offset: 70
                    })
                })
            }
        }
    }
</script>

<style>
</style>